import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import { Col, Row } from "antd";
import * as React from "react";
import { RouteComponentProps } from "react-router";
import { getDoctorOne, getDoctorOrHospitalComment } from "../../axios/Request";
import Estimage from "../../component/Estimage";
import { AppointmentComment } from "../../type/CommonData";
import { DoctorData } from "../../type/DoctorData";
import DoctorCard from "../doctor-detail/DoctorCard";
import RecommendUser from "../doctor-detail/RecommendUser";

const styles = (theme: Theme) =>
  createStyles<"root" | "estimate" | "estimateLeft" | "estimateRight">({
    root: {},
    estimate: {
      display: "flex",
      padding: "5px 20px 5px 20px"
    },
    estimateLeft: {
      padding: "0px 10px 0px 10px"
    },
    estimateRight: {
      display: "flex",
      flexDirection: "column",
      alignContent: "space-between"
    }
  });
interface Iprops extends WithStyles<typeof styles>, RouteComponentProps<any> {}
interface Istates {
  commentData: AppointmentComment[];
  doctorData: DoctorData;
}
/**
 * 医生评价组件
 */
class EstimateDoctor extends React.Component<Iprops, Istates> {
  constructor(props: Iprops) {
    super(props);
    this.state = {
      doctorData: {},
      commentData: []
    };
  }

  public componentWillMount() {
    getDoctorOrHospitalComment({}).then(value => {
      this.setState({
        commentData: value.data.content
      });
    });
    getDoctorOne({id:this.props.match.params.id}).then(value => {
      this.setState({ doctorData: value.data.content[0] });
    });
  }
  public render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>
        <DoctorCard data={this.state.doctorData} />
        <Row>
          <Col span={18}>
            <Estimage data={this.state.commentData} />
          </Col>
          <Col span={6}>
            <RecommendUser
              title={"同科室医生推荐"}
              data={[
                this.state.doctorData,
                this.state.doctorData,
                this.state.doctorData
              ]}
            />
          </Col>
        </Row>
      </div>
    );
  }
}

export default withStyles(styles)(EstimateDoctor);
